@font-face {
	font-family: Efteling;
	src: url('ChaparralPro-Regular.otf');
}

/*
	BODY
*/

body {
	font-family: Efteling;
	color: #482800;
	background: #ffecca;
}

.container{
	position: relative;
}

.container .row .twelvecol.box.red.last{
	background: red url('/img/header.jpg') no-repeat;
}

/*************************
 * Extra klasses voor rounded, margins en paddings
 *************************/


.error,.alert, .notice,.success, .info { padding: 0.8em; border: 2px solid #ddd; }
.error ul,.alert ul, .notice ul,.success ul, .info  ul{ margin: 0 1em; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info 			{ background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }
.info a			{ color: #205791; }

.rounded{
	-webkit-border-radius: 7px !important;
	-moz-border-radius: 7px !important;
	border-radius: 7px !important;
}

.full-height{height: 100%;}

.margin{margin: 10px;}
.margin-top{ margin-top: 10px}
.margin-right{ margin-right: 10px}
.margin-bottom{ margin-bottom: 10px}
.margin-left{ margin-left: 10px !important;}

.padding{margin: 10px}
.padding-top{ padding-top: 10px}
.padding-right{ padding-right: 10px}
.padding-bottom{ padding-bottom: 10px}
.padding-left{ padding-left: 10px}


button{
	background: none repeat scroll 0 0 #875A43;
    border: 3px solid #a69739;
    border-radius: 7px 7px 7px 7px;
    color: #333;
    font-family: Efteling;
    font-size: 1.6em;
    padding: 6px 10px 0px !important;
    text-transform: uppercase;
	    
	background-image: linear-gradient(bottom, rgb(255,232,117) 30%, rgb(255,255,217) 65%);
	background-image: -o-linear-gradient(bottom, rgb(255,232,117) 30%, rgb(255,255,217) 65%);
	background-image: -moz-linear-gradient(bottom, rgb(255,232,117) 30%, rgb(255,255,217) 65%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,232,117) 30%, rgb(255,255,217) 65%);
	background-image: -ms-linear-gradient(bottom, rgb(255,232,117) 30%, rgb(255,255,217) 65%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.3, rgb(255,232,117)),
		color-stop(0.65, rgb(255,255,217))
	);
 
}

button:active{
	background-image: linear-gradient(bottom, rgb(255,255,217) 30%, rgb(255,232,117) 65%);
	background-image: -o-linear-gradient(bottom, rgb(255,255,217) 30%, rgb(255,232,117) 65%);
	background-image: -moz-linear-gradient(bottom, rgb(255,255,217) 30%, rgb(255,232,117) 65%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,255,217) 30%, rgb(255,232,117) 65%);
	background-image: -ms-linear-gradient(bottom, rgb(255,255,217) 30%, rgb(255,232,117) 65%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.3, rgb(255,255,217)),
		color-stop(0.65, rgb(255,232,117))
	);
}

button.small{
    border: 2px solid #a69739;
    font-size: 1em;
	font-weight: bold;
    text-transform: uppercase;

}

/************************
 * Box instellingen
*************************/
.box{overflow: hidden;}

.box .outer_wrapper, .box .wrapper{
	-moz-border-radius: inherit;
	-webkit-border-radius: inherit;
	border-radius: inherit;
}

.box h2{

	font-family: Efteling;
	font-weight: lighter;
	text-transform: uppercase;
	text-align: center;
	margin: 13px 0 0 0;
	padding: 0;
}
.box h2 a{ text-decoration: none; color: inherit;}

.box.red{
/*background-color: #c40000; */
background:url('/img/menubg.jpg') repeat-x bottom left;
color: #fffde2;}
.box.red .outer_wrapper{border: 2px solid #890300; margin: 5px;
background:url('/img/menugradient.png') no-repeat top center;}
.box.red .wrapper{border: 1px solid #feaf1e}
.box.red h2{color:#fffde2;text-shadow: 2px 2px 0px rgba(000, 000, 000, 0.3);}

.box.yellow{
/*background-color: #ffecca; color: #482800;*/
background-image: linear-gradient(bottom, rgb(243,224,179) 0%, rgb(255,247,233) 68%);
background-image: -o-linear-gradient(bottom, rgb(243,224,179) 0%, rgb(255,247,233) 68%);
background-image: -moz-linear-gradient(bottom, rgb(243,224,179) 0%, rgb(255,247,233) 68%);
background-image: -webkit-linear-gradient(bottom, rgb(243,224,179) 0%, rgb(255,247,233) 68%);
background-image: -ms-linear-gradient(bottom, rgb(243,224,179) 0%, rgb(255,247,233) 68%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(243,224,179)),
	color-stop(0.68, rgb(255,247,233))
);}
.box.yellow .outer_wrapper{border: 2px solid #ce9c20; margin: 5px;}
.box.yellow .wrapper{border: 1px solid #e8c56c; margin: 1px;}
.box.yellow h2{color:#482800;text-shadow: 2px 2px 0px rgba(000, 000, 000, 0.1);}

/* Enkel de navigatie krijgt de lijntjes*/
#nav.box.red h2:after,#nav.box.yellow h2:after{content: "";display: block;height: 3px;width: 100%;padding: 0;margin: 10px 0;}
#nav.box.red h2:after{background: url('/img/hr.png');}
#nav.box.yellow h2:after{background: url('/img/hr_yellow.png');}
#nav.box h2:last-child:after{ display: none;}
#nav.box h2:last-child{margin-bottom: 10px;}

.box.first, .box.first .outer_wrapper, .box.first .wrapper{
	border-top: 0  none !important;
	-webkit-border-top-right-radius: 0px !important;
	-webkit-border-top-left-radius: 0px !important;
	-moz-border-radius-topright: 0px !important;
	-moz-border-radius-topleft: 0px !important;
	border-bottom-top-radius: 0px !important;
	border-bottom-top-radius: 0px !important;
}

.box.first .outer_wrapper, .box.first .wrapper{margin-top: 0;}




/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
.top_nav{ height: 40px; overflow: hidden; margin: 5px;}
.top_nav h2{ line-height: 40px; margin: 0 !important;
width:85%;}
.top_nav button{ height: 100%; padding: 6px 0 !important; font-size:18px;}

#login_form{overflow: hidden;}
#login_form label{display: block;}
#login_form button, #login_form input{
	font-weight: bold;
	width: 100%;
	padding: 11px;
}

#fotoservice dt{
	float: left;
	width: 50%;
}

#fotoservice .picture{
	position: relative;
	margin-top: 10px;
}
#fotoservice .picture img{
	display: block;
	width: 100%;
	height: 300px;
	overflow: hidden;
}

#fotoservice .picture img.border{
	border: 5px solid red;
}
#fotoservice .picture .overlay{
	display: none;
	background: rgba(255, 255, 255, 0.5);
	width: 100%;
	position: absolute;
	bottom: 0;
}

#fotoservice .picture .overlay a{
	font-size: 1.4em;
	float: left;
	width: 50%;
}

.hoofdmenu{
	margin:0 auto;
	float:none !important;
	display:none;
}

.header{
	background-image: linear-gradient(bottom, rgb(196,0,0) 16%, rgb(218,79,51) 63%);
	background-image: -o-linear-gradient(bottom, rgb(196,0,0) 16%, rgb(218,79,51) 63%);
	background-image: -moz-linear-gradient(bottom, rgb(196,0,0) 16%, rgb(218,79,51) 63%);
	background-image: -webkit-linear-gradient(bottom, rgb(196,0,0) 16%, rgb(218,79,51) 63%);
	background-image: -ms-linear-gradient(bottom, rgb(196,0,0) 16%, rgb(218,79,51) 63%);
	
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.16, rgb(196,0,0)),
	color-stop(0.63, rgb(218,79,51))
	);
}
.header h2{
	border: 1px solid #f2971c;
    margin: 5px;
    padding: 1% 0 0.6%;
    width: 99%;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.header button{
    margin: 10px 0 0 10px;
	color: #fffde2;
	background:none;
	text-align:left;
}


*/
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

/* iPhone [portrait + landscape] */
@media screen and (max-width: 320px) {
	.row{
		overflow:scroll;
	}
}

/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}